<template>
    <div class="list-wrapper">
        <div class="list-top">
            <el-form :inline="true">
                <el-form-item label="搜索">
                    <el-input v-model="search" placeholder="请输入分组名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchUser">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="record">
            <table class="list-table">
                <thead>
                <tr>
                    <th width="20%">
                        <el-button type="text" @click="openAdd"><span class="icon add"></span></el-button>
                    </th>
                    <th width="15%">分组名称</th>
                    <th width="25%">成员</th>
                    <th width="40%">分组描述</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>
                        <span class="icon del" @click="del(item.id)"></span>
                        <span class="icon edit" @click="edit(item.id)"></span>
                        <span class="icon top" @click="auth(item.id)"></span>
                        <span class="icon user" @click="member(item.id)"></span>
                    </td>
                    <td>{{item.title}}</td>
                    <td>{{item.list}}</td>
                    <td>{{item.info}}</td>

                </tr>
                </tbody>
            </table>
            <div class="namtc-pagination">
                <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper"
                               :total="pageTotal">
                </el-pagination>
            </div>
            <el-dialog title="添加分组" :visible.sync="pop" size="tiny">
                <el-form :model="ruleForm" :rules="rules" ref="form">
                    <el-form-item label="分组名称" prop="title" :label-width="width">
                        <el-col :span="span">
                            <el-input v-model="ruleForm.title" size="small" placeholder="请输入分组名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="分组描述" prop="info" :label-width="width">
                        <el-col :span="span">
                            <el-input v-model="ruleForm.info" size="small" placeholder="请输入分组描述"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="pop = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="编辑分组" :visible.sync="popEdit" size="tiny">
                <el-form :model="ruleForm" :rules="rules" ref="form">
                    <el-form-item label="分组名称" prop="title" :label-width="width">
                        <el-col :span="span">
                            <el-input v-model="ruleForm.title" size="small" placeholder="请输入分组名称"></el-input>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="分组描述" prop="info" :label-width="width">
                        <el-col :span="span">
                            <el-input v-model="ruleForm.info" size="small" placeholder="请输入分组描述"></el-input>
                        </el-col>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="popEdit = false">取 消</el-button>
                    <el-button type="primary" @click="editSubmit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="分组成员" :visible.sync="popMember">
                <table class="list-table">
                    <thead>
                    <tr>
                        <th width="20%">
                            <el-button type="text" @click="openAddMember"><span class="icon add"></span></el-button>
                        </th>
                        <th width="60%">成员</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in memberList" :key="item.uid">
                        <td>
                            <span class="icon del" @click="delMember(item.uid)"></span>
                        </td>
                        <td>{{item.username}}</td>
                    </tr>
                    </tbody>
                </table>

            </el-dialog>
            <el-dialog title="添加分组成员" :visible.sync="addMember" size="tiny">
                <el-form :model="addMemberForm" :rules="addMemberRules" ref="addMemberForm">
                    <el-form-item label="选择用户" prop="uid" :label-width="width">
                        <el-col :span="span">
                            <el-select v-model="addMemberForm.uid" filterable clearable placeholder="请选择">
                                <el-option v-for="item in userList" :key="item.uid" :label="item.username"
                                           :value="item.uid"></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addMember = false">取 消</el-button>
                    <el-button type="primary" @click="addMemberSubmit">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="分组权限" :visible.sync="popAuth" size="tiny">
                <el-tree :data="authList" show-checkbox accordion node-key="id" @check-change="checkAuth"
                         ref="tree" highlight-current>
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="popAuth = false">取 消</el-button>
                    <el-button type="primary" @click="submitAuth()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    const ruleForm = {
        id: '',
        title: '',
        info: '',
    };
    const addMemberForm = {
        uid: ''
    };
    export default {
        data() {
            return {
                page: 1,
                pageTotal: 0,
                list: [],
                pop: false,
                width: '120px',
                span: 18,
                ruleForm: _g.cloneJson(ruleForm),
                rules: {
                    title: [
                        {required: true, message: '请填写分组名称', trigger: 'blur'}
                    ]
                },
                search: '',
                popEdit: false,
                popMember: false,
                memberList: [],
                addMember: false,
                userList: [],
                addMemberForm: _g.cloneJson(addMemberForm),
                addMemberRules: {
                    uid: [
                        {type: 'number', required: true, message: '请选择用户', trigger: 'blur'}
                    ]
                },
                group_id: '',
                popAuth: false,
                authList: [],
                groupId: '',
            }
        },

        created() {
            this.fetchData();
            this.getUserList();
        },

        methods: {
            fetchData() {
                let data = {
                    page: this.page,
                    search: this.search
                };
                this.apiPost('Admin/groupLists', data).then(res => {
                    this.list = res.list;
                    this.pageTotal = parseInt(res.total)
                })
            },
            submit() {
                this.pop = false;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.apiPost('Admin/groupAdd', this.ruleForm).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.fetchData();
                                this.ruleForm = _g.cloneJson(ruleForm)
                            } else {
                                this.pop = true
                            }
                        })
                    } else {
                        this.pop = true;
                        return false
                    }
                });
            },
            openAdd() {
                this.ruleForm = _g.cloneJson(ruleForm);
                this.pop = true;
                setTimeout(() => {
                    this.$refs.form.resetFields()
                }, 0)
            },
            del(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let data = {
                        id: id
                    };
                    this.apiPost('Admin/groupDelete', data).then(res => {
                        let remind = res.error ? 'error' : 'success';
                        _g.toastMsg(remind, res.msg);
                        if (!res.error) {
                            this.fetchData()
                        }
                    })
                }).catch(() => {

                });
            },
            edit(id) {
                let data = {
                    id: id
                };
                this.apiPost('Admin/groupDetail', data).then(res => {
                    this.ruleForm = res;
                    this.popEdit = true
                })
            },
            editSubmit() {
                this.popEdit = false;
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.apiPost('Admin/groupEdit', this.ruleForm).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.fetchData();
                                this.ruleForm = _g.cloneJson(ruleForm)
                            } else {
                                this.popEdit = true
                            }
                        })
                    } else {
                        this.popEdit = true;
                        return false
                    }
                });
            },
            handleCurrentChange(val) {
                this.page = val;
                this.fetchData()
            },
            searchUser() {
                this.fetchData()
            },
            member(id) {
                this.group_id = id;
                let data = {
                    id: id
                };
                this.apiPost('Admin/groupMember', data).then(res => {
                    this.memberList = res;
                    this.popMember = true
                })
            },
            getUserList() {
                this.apiPost('System/getUserLists').then(res => {
                    this.userList = res
                })
            },
            openAddMember() {
                this.addMemberForm = _g.cloneJson(addMemberForm);
                this.addMember = true;
                setTimeout(() => {
                    this.$refs.addMemberForm.resetFields()
                }, 0)

            },
            addMemberSubmit() {
                this.$refs.addMemberForm.validate((valid) => {
                    if (valid) {
                        this.popMember = false;
                        this.addMember = false;
                        this.addMemberForm.group_id = this.group_id;
                        this.apiPost('Admin/groupMemberAdd', this.addMemberForm).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.member(this.group_id);
                                this.popMember = true;
                                this.fetchData();
                                this.addMemberForm = _g.cloneJson(addMemberForm)
                            } else {
                                this.popMember = true;
                                this.addMember = true
                            }
                        })
                    } else {
                        return false
                    }
                });
            },
            delMember(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.popMember = false;
                    let data = {
                        uid: id,
                        group_id: this.group_id
                    };
                    this.apiPost('Admin/groupMemberDelete', data).then(res => {

                        let remind = res.error ? 'error' : 'success';
                        _g.toastMsg(remind, res.msg);
                        this.popMember = true;
                        if (!res.error) {
                            this.member(this.group_id);
                            this.fetchData()

                        }
                    })
                }).catch(() => {
                    return false
                });
            },
            auth(id) {
                this.checked = [];
                this.groupId = id;
                this.apiPost('Admin/authList').then(res => {
                    this.authList = res;
                    this.getAuthArr(id);
                });
            },
            getAuthArr(id) {
                this.apiPost('System/AuthArr', {id: id}).then(res => {
                    this.popAuth = true;
                    setTimeout(() => {
                        this.$refs.tree.setCheckedKeys(res.son)
                        res.parent.forEach(item => {
                            this.$refs.tree.setChecked(item, true);
                        });
                    });
                });
            },
            checkAuth(node, check, children) {
                return
            //   if(!children){
            //     let checked = this.$refs.tree.getCheckedKeys(true);
            //     this.authList.forEach(item => {
            //       item.children.forEach(item1 => {
            //         let length = item1.children ? item1.children.length : 0;
            //         for (let i = 0; i < length; i++) {
            //           if (checked.indexOf(item1.children[i].id) !== -1 && checked.indexOf(item1.id) === -1) {
            //             checked.push(item1.id);
            //             continue
            //           }
            //         }
            //       })
            //     });
            //     this.$refs.tree.setCheckedKeys(checked);
            //   }
            },
            submitAuth() {
                let checked = this.$refs.tree.getCheckedKeys(true);
                this.authList.forEach(item => {
                    item.children.forEach(item1 => {
                        let length = item1.children ? item1.children.length : 0;
                        for (let i = 0; i < length; i++) {
                            if (checked.indexOf(item1.children[i].id) !== -1 && checked.indexOf(item1.id) === -1) {
                                checked.push(item1.id);
                                continue
                            }
                        }
                    })

                });
                this.popAuth = false;
                let data = {auth: checked};
                data.id = this.groupId;
                this.apiPost('Admin/authEdit', data).then(res => {
                    let remind = res.error ? 'error' : 'success';
                    _g.toastMsg(remind, res.msg);
                    if (res.error) {
                        this.popAuth = true
                    }
                });
            }
        }
    }
</script>

<style scoped>
</style>
